<template>
    <div class="search-list-container searchHeight">
        <div class="search-wrapper">
            <el-form size="small" :inline="true" label-width="auto">
                <el-form-item label="申请单位：" prop="applicant">
                    <el-input v-model="applicant" placeholder="请输入" clearable @change="applicantChange()" />
                </el-form-item>
                <el-form-item label="VPN服务ID:">
                    <el-input v-model="VPNServiceID" placeholder="请输入" clearable @change="VPNServiceIDChange()" />
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" class="search-icon"
                    @click="VPNSearch()">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="VPNResetting()">重置</el-button>
            </el-form>
        </div>
        <div class="list-wrapper">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="VPNAdd">新增</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" icon="el-icon-delete" size="mini" :disabled='multiple ? false : true'
                        :key="1" @click="VPNDeleteArr({})" >删除</el-button>
                </el-col>
            </el-row>
            <el-table ref="tables" width="100%" height="100%" :data="vpnList" @selection-change="vpnDelid"
                :cell-style="{ 'text-align': 'center' }" :header-cell-style="{ textAlign: 'center' }">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="VPN服务ID" align="center" prop="vpnserviceId" :required="true" width="110">
                </el-table-column>
                <el-table-column label="申请单位" align="center" prop="unit" width="100" :show-overflow-tooltip="true" />
                <el-table-column label="通信地址" align="center" prop="address" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="统一社会信用代码" align="center" prop="uniformSocialCreditCode" width="140" />
                <el-table-column label="VPN负责人" align="center" prop="person" :show-overflow-tooltip="true"
                    width="100" />
                <el-table-column label="负责人电话" align="center" prop="phone" :show-overflow-tooltip="true" width="100" />
                <el-table-column label="用途" align="center" prop="purpose" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="使用人数" align="center" prop="numberOfPeople" :show-overflow-tooltip="true"
                    width="100">
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
                    width="220">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-view" @click="VPNDetails(scope.row)"
                            v-hasPermi="['alarm:deviceRule:edit']">详情</el-button>
                        <el-button size="mini" type="text" icon="el-icon-edit"
                            @click="splitNetworkSegments(scope.row, scope.index)">修改</el-button>
                        <el-button size="mini" type="text" icon="el-icon-notebook-2"
                            @click="VPNDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页器 -->
        <div :class="{ 'hidden': hidden }" class="pagination-container">
            <el-pagination :background="background" :current-page.sync="currentPage" :page-size="10"
                layout='total, sizes, prev, pager, next, jumper' :page-sizes="[10, 20, 30, 40, 50]"
                :pager-count="pagerCount" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>

        <VPNDialog :showDialog.sync="showAddSegmentDialog" :isAdd="isAdd" v-if="showAddSegmentDialog"
            :vpnDetailList="vpnDetailList" :isUpdata="isUpdata" :isEdit="isEdit" />
    </div>
</template>

<script>
import VPNDialog from "./vpnMannAdd.vue"
import { vpnPage, vpnDel, vpnDetail } from "@/api/vpnManage/vpnManage.js";
export default {
    data() {
        return {
            applicant: "",//申请单位
            VPNServiceID: "",//VPN服务ID
            vpnList: [],  //VPN列表,
            multiple: false,
            pageNum: 1,
            currentPage: 1,
            background: false,
            autoScroll: true,
            hidden: false,
            total: 0,
            isAdd: false,
            showAddSegmentDialog: false,
            pagerCount: document.body.clientWidth < 992 ? 5 : 7,
            vpnTabulation: {
                VPNServiceId: "",
                pageNum: 1,
                pageSize: 10,
                unit: ""
            },
            delArr: [],
            vpnDetailList: '',
            isUpdata: true,
            isEdit: false,
        };
    },
    components: {
        VPNDialog,
    },
    provide() {
        return {
            updata: this.getPagination,

        }
    },
    methods: {

        //单选按钮
        vpnDelid(value) {
            this.delArr = value
            if (value.length) {
                this.multiple = true;
            } else {
                this.multiple = false;
            }
        },
        //删除
        VPNDeleteArr() {
            this.$confirm("是否确认删除所选的数据项?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.delArr.filter(async (item) => {
                    let result = await vpnDel(item.id)
                    if (result.code == 200) {
                        this.getPagination()
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                    }
                })
            })

        },
        //详情
        async VPNDetails(value) {
            const result = await vpnDetail(value.id)
            this.vpnDetailList = result.data
            this.isAdd = 3
            this.showAddSegmentDialog = true
            this.isUpdata = false
            this.isEdit = false
        },
        //修改
        async splitNetworkSegments(value) {
            const result = await vpnDetail(value.id)
            this.vpnDetailList = result.data
            this.isUpdata = true
            this.isEdit = true
            this.isAdd = 2
            this.showAddSegmentDialog = true
        },
        //重置
        VPNResetting() {
            this.applicant = ''
            this.VPNServiceID = ''
            this.vpnTabulation.VPNServiceId = this.VPNServiceID
            this.vpnTabulation.unit = this.applicant
            this.getPagination()
        },
        //搜索
        async VPNSearch() {
            this.vpnTabulation.unit = this.applicant;
            this.vpnTabulation.VPNServiceId = this.VPNServiceID;
            this.vpnTabulation.pageNum = 1;
            let result = await vpnPage(this.vpnTabulation);
            this.total = result.data.total
            this.vpnList = result.data.records
        },
        // 新增
        VPNAdd() {
            this.vpnDetailList = ''
            this.isAdd = 1
            this.isUpdata = true
            this.showAddSegmentDialog = true
        },
        // 删除
        VPNDelete(value) {
            this.$confirm("是否确认删除所选的数据项?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async () => {
                await vpnDel(value.id);
                this.$message({
                    message: 'VPN删除成功',
                    type: 'success'
                });
                this.getPagination()
            })
        },
        //分页器
        handleSizeChange(val) {
            if (this.currentPage * val > this.total) {
                this.currentPage = 1
            }
            this.$emit('pagination', { page: this.currentPage, limit: val })
            if (this.autoScroll) {
                scrollTo(0, 800)
            }
        },
        handleCurrentChange(val) {
            this.vpnTabulation.pageNum = val
            this.getPagination()
            if (this.autoScroll) {
                scrollTo(0, 800)
            }
        },
        //分页数据
        async getPagination() {
            let result = await vpnPage(this.vpnTabulation);
            this.vpnList = result.data.records;
            this.total = result.data.total;
        },

    },
    computed: {

    },
    mounted() {
        this.getPagination()
    },
};
</script>

<style lang="scss" scoped>
.searchHeight {
    height: calc(100% - 54px) !important;
}

.search-icon {
    margin-left: 30px !important;
}

::v-deep .el-upload {
    text-align: left;
}

::v-deep .el-upload div {
    margin: 10px 0;
}

.pagination-container {
    /* background: #fff; */
    padding: 32px 16px;
}

.pagination-container.hidden {
    display: none;
}

::v-deep .el-date-range-picker {
    width: 715px;
}

::v-deep .el-table--border .el-table__cell:first-child .cell {
    padding-left: 10px;

}

::v-deep .el-table .cell {
    padding-left: 10px;
}

.search-list-container .search-wrapper {
    margin: 0 0 24px;
    padding: 20px 0px 0px 0px;
    background-color: #031C48;
}

::v-deep .el-input__inner {
    padding: 0;
    padding-left: 10px;
}
</style>